<script setup lang="ts">
import { computed, ref } from 'vue';
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import '@splidejs/vue-splide/css';

const props = defineProps<{ options?: any; slides?: Slide[] }>();
const emit = defineEmits(['onSplide']);

interface Slide {
    image: string;
    alt: string;
}

const defaultSlides = ref<any[]>([
    { image: '/images/delicacy/01.jpg', alt: 'Image 1' },
    { image: '/images/delicacy/02.jpg', alt: 'Image 2' },
    { image: '/images/delicacy/03.jpg', alt: 'Image 3' },
    { image: '/images/delicacy/04.jpg', alt: 'Image 4' },
    { image: '/images/delicacy/05.jpg', alt: 'Image 5' }
]);
const demoSlides = computed(() => props.slides || defaultSlides.value);

const defaultOptions = {
    type: 'loop',
    arrows: false,
    pagination: false,
    speed: 500,
    autoplay: false,
    pauseOnHover: true,
    resetProgress: true,
    drag: demoSlides.value.length > 1,
    width: '100%',
    height: '300px',
};

const onActive = ({ index }: { index: number }) => {
    emit('onSplide', index);
};
</script>

<template>
    <Splide class="h-full w-full" ref="splide" :options="{ ...defaultOptions, ...options }" @splide:active="onActive">
        <SplideSlide v-for="(slide, index) in demoSlides" :key="index">
            <slot name="slide" :slide="slide" :index="index" />
        </SplideSlide>
    </Splide>
</template>

<style lang="scss" scoped></style>
